<template>
  <uni-nav-bar title="呼叫安蓝服务列表" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package" style="padding: 0px;">
    <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
      activeColor="#1B91FF"></uni-segmented-control>
  </view>
  <view class="center" style="justify-content: space-around;margin-bottom: 20rpx;" v-if="current === 1">
    <text v-for="(item, index) in stage" :key="index" :class="level == index ? 'active' : ''" @click="ChangeTab(index)">
      {{ item.name }}
    </text>
  </view>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: current == '1' ? mouHeight + 'px' : pageHeight + 'px' }">
    <view class="package direction-start Unclaimeds" :style="{display:current === 0?'block':'none'}"
      @click="navTo('Sale/callBack/callDetail?id='+item.id)" v-for="(item) in receiveList" :key="item.id">
      <view>待领取</view>
      <view><text>呼叫时间：</text><text>{{item.createtime}}</text></view>
      <view style="margin: 10rpx 0px;">
        <text>{{item.driver_name}} </text>
        <text style="color:#1B91FF;">{{item.driver_mobile}}</text>
      </view>
      <view><text>备注：</text><text>{{item.driver_des}}</text></view>
      <view class="receive" @click.stop="collect(item.id)">领取任务</view>
    </view>
    <view class="package direction-start Unclaimeds" :style="{display:current !== 0?'block':'none'}"
      @click="navTo('Sale/callBack/callDetail?id='+item.id)" v-for="(item) in receiveList" :key="item.id">
      <view style="background: #F2F2F2;color:#333;">已领取</view>
      <view><text>呼叫时间：</text><text>{{item.createtime}}</text></view>
      <view style="margin: 10rpx 0px;"><text>领取时间：</text><text>{{item.updatetime}}</text></view>
      <view>
        <text>{{item.driver_name}} </text>
        <text style="color:#1B91FF;">{{item.driver_mobile}}</text>
      </view>
      <view style="margin: 10rpx 0px;">{{item.plug_name}}已领取</view>
      <view><text>车友备注：</text><text>{{item.driver_des}}</text></view>
      <view style="margin: 10rpx 0px 0px;"><text>服务人员备注：</text><text>{{item.plug_des}}</text></view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
  import { showLoading, errorToast, successToast } from '@/utils/prompt';
  import { navBack, navTo } from '@/utils/navigator';
  import { onLoad, onShow } from '@dcloudio/uni-app';
  import { getDriverID } from '@/stores/driverID';
  import { toPublish } from '@mqtt';
  import { getCallList } from '@/gql/call';
  import { ref } from 'vue';
  const driver_id = getDriverID();
  const items = ['待领取', '已领取'];
  const current = ref(0);
  const stage = [{ name: '我的领取', value: '1' }, { name: '团队领取', value: '1' }];
  const level = ref(0);

  const isLoading = ref(false);
  const lastPage = ref(1);
  const currentPage = ref(1);
  const receiveList = ref([])

  const pageHeight = ref('');
  const mouHeight = ref('');
  onLoad((pearm) => {
    current.value = pearm.act?Number(pearm.act):0;
    uni.getSystemInfo({
      success: function (res) {
        pageHeight.value = (res.windowHeight - 110).toString();
        mouHeight.value = (res.windowHeight - 150).toString();
      },
    });
  });
  onShow(() => {
    currentPage.value = 1;
    receiveList.value = [];
    init();
  })
  function init() {
    showLoading('正在加载');
    isLoading.value = true;
    const payload = {
      query: getCallList,
      variables: {
        page: currentPage.value,
        plug_id: level.value === 0 && current.value === 1 ? driver_id : 0,
        status: current.value,
      },
    };
    toPublish(
      'ql/plug/getCallList',
      payload,
      (obj : any) => {
        const { get_call_list } = obj.data;
        isLoading.value = false;
        receiveList.value = [...receiveList.value, ...get_call_list.list];
        lastPage.value = get_call_list.lastpage;
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
  /**
   * @param {Object} e 订单分类状态
   */
  function onClickItem(e : any) {
    current.value = e.currentIndex;
    currentPage.value = 1;
    receiveList.value = [];
    init();
  }
  /**
   * @param {Object} index 待加注索引选中
   */
  function ChangeTab(index : number) {
    level.value = index;
    currentPage.value = 1;
    receiveList.value = [];
    init();
  }
  /**
   * 领取任务
   */
  function collect(id : number) {
    showLoading('正在加载');
    const payload = {
      plug_id: driver_id,
      id
    };
    toPublish('plug/receiveCall', payload, (obj : any) => {
      uni.hideLoading();
      const { code, msg } = obj;
      if (code === 1) {
        successToast(msg)
        currentPage.value = 1;
        receiveList.value = [];
        init();
      } else {
        errorToast(msg)
      }
    });
  }
</script>

<style scoped lang="less">
  .center {
    text {
      padding: 3rpx 10rpx 5rpx;
      box-sizing: border-box;
      background: #dddddd;
      border-radius: 2px;
    }

    .active {
      color: #1b91ff;
      background: #deefff;
    }
  }

  .Unclaimeds:nth-of-type(1) {
    margin-top: 0px;
  }

  .Unclaimeds {
    position: relative;

    view:nth-of-type(1) {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 104rpx;
      height: 44rpx;
      background: rgba(253, 155, 0, 0.14);
      border-radius: 0px 5px 0px 5px;
      text-align: center;
      line-height: 44rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #FD9B00;
    }
  }

  .receive {
    width: 490rpx;
    height: 84rpx;
    box-shadow: 1px 2px 4px 0px rgba(204, 204, 204, 0.5);
    border-radius: 5px;
    border: 2px solid #FD9B00;
    font-size: 36rpx;
    font-weight: 500;
    color: #FD9B00;
    text-align: center;
    line-height: 84rpx;
    margin: 20rpx auto 0px;
  }
</style>